<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套选择器</title>
    <!--嵌套选择器-->
    <!--它可能适用于选择器内部的选择器的样式。-->
    <!--在下面的例子设置了三个样式：-->
    <!--为所有p元素指定一个样式-->
    <!--为所有class="marked"的元素指定一个样式-->
    <!--为所有class="marked"元素内的p元素指定一个样式-->
    <style>
        p
        {
            color: blue;
            text-align: center;
        }
        .marked
        {
            background-color: red;
        }
        .marked p
        {
            color: white;
        }
    </style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
    <p>这个段落不是蓝色文本。</p>
</div>
<p>所有class=“marked”元素内的p元素指定一个样式，但有不同的文本颜色。</p>
</body>
</html>